<template>
    <!-- 基本信息 -->
    <article class="city-basicInfo-box" id="basic-info">
        <div class="public-header-content">
            <div class="header">
                <i></i>基本信息
            </div>
            <a-row class="content clearfix" :gutter="16">
                <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="inside">
                        <header>人口数量</header>
                        <div class="content">
                            <img src="/static/img/city-population.png" alt="">
                            <h3>{{ isNull0(getCityIndexData.totalPeople, '人') }}</h3>
                            <p>{{ isNull0(getCityIndexData.peopleGrowthRateTips) }}</p>
                        </div>
                    </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <div class="inside">
                        <header>安全指数</header>
                        <div class="content">
                            <a-progress
                                type="circle"
                                :percent="calculateSecurity(getCityIndexData.safetyIndex).progress"
                                :status="calculateSecurity(getCityIndexData.safetyIndex).color"
                                :format="percent => '安全指数'+ calculateSecurity(getCityIndexData.safetyIndex).score" />
                            <p>社会环境{{ calculateSecurity(getCityIndexData.safetyIndex).score }}</p>
                        </div>
                    </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <!--族裔比例——饼图-->
                    <ethnic></ethnic>
                </a-col>
                <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <!--平均家庭收入——柱状图-->
                    <averagehouseholdincome></averagehouseholdincome>
                </a-col>
                <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <!--大学以上教育比例——柱状图-->
                    <UniversityEducation></UniversityEducation>
                </a-col>
                <a-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
                    <!--失业率——柱状图-->
                    <unemployment></unemployment>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
                    <!--生活成本——柱状图-->
                    <livingCost></livingCost>
                </a-col>
            </a-row>
        </div>
    </article>

</template>

<script>
    import ethnic from './ethnic.vue';  //族裔比例——饼图
    import averagehouseholdincome from './averagehouseholdincome.vue';  //平均家庭收入——柱状图
    import UniversityEducation from './UniversityEducation.vue'    //大学以上教育比例——柱状图
    import unemployment from './unemployment.vue'    //失业率——柱状图
    import livingCost from './livingCost.vue'    //生活成本——柱状图


    export default {
        data() {
            return {
                cityId: this.$route.query.cityid, //城市Id

            }
        },
        computed: {
            //从state获取城市指数数据
            getCityIndexData() {
                return this.$store.getters.get_cityIndexData
            },
        },
        created() {},
        mounted() {

        },
        methods: {
            //计算安全指数进度条结果：0：不安全、1：较安全、2：安全、3：非常安全
            calculateSecurity(data){
                let results = {};
                let parseData = parseInt(data);
                if (parseData == 3) {
                    results = {
                        progress: 95,
                        // color: '#4dc600'
                        color: 'success',
                        score: '非常安全'
                    };
                } else if(parseData == 2) {
                    results = {
                        progress: 80,
                        // color: '#008dff'
                        color: 'active',
                        score: '安全'
                    };
                }else if(parseData == 1) {
                    results = {
                        progress: 65,
                        // color: '#ff9b05'
                        color: 'exception',
                        score: '较安全'
                    };
                }else if(parseData == 0) {
                    results = {
                        progress: 45,
                        // color: '#ff9b05'
                        color: 'exception',
                        score: '不安全'
                    };
                }
                return results;
            },
        },
        components: {
            ethnic,//族裔比例——饼图
            averagehouseholdincome,//平均家庭收入——柱状图
            UniversityEducation,//大学以上教育比例——柱状图
            unemployment,//失业率——柱状图
            livingCost,//生活成本——柱状图
        }
    }
</script>
<style lang="less" type="text/less">
    body{
        .city-basicInfo-box{
            .ant-progress-circle .ant-progress-text{
                font-size: 21px;
                white-space: pre-wrap;
                line-height: 30px;
                padding: 10px;
            }
        }
    }
</style>